<template>
  <div class="wrapper">
    <a-space>
      <a-tooltip placement="top">
        <template slot="title">
          <span>刷新</span>
        </template>
        <a-icon @click="refresh" type="redo" style="fontSize:19px;marginLeft:15px;cursor:pointer;" />
      </a-tooltip>
    </a-space>
    <a-space>
      <a-tooltip placement="top" class="other">
        <template slot="title">
          <span>密度</span>
        </template>
        <a-icon @click="density" type="column-height" style="fontSize:19px;marginLeft:15px;cursor:pointer;" />
        <a-select v-show="densityVisb" :default-value="0" class="density" @blur="densityBlur" @change="densityChange">
          <a-select-option :value="0">
            默认
          </a-select-option>
          <a-select-option :value="1">
            中等
          </a-select-option>
          <a-select-option :value="2">
            紧凑
          </a-select-option>
        </a-select>
      </a-tooltip>
    </a-space>
  </div>
</template>

<script>
export default {
  name: 'UtilModules',
  data() {
    return {
      densityVisb: false,
    }
  },
  methods: {
    refresh() {
      this.$emit('refresh')
    },
    density() {
      this.densityVisb = true

    },
    densityBlur() {
      this.densityVisb = false
    },
    densityChange(value) {
      this.$emit('densityChange', value)
    },
  },
}
</script>
<style lang="scss" scoped>
.wrapper {
  display: inline-flex;
}
.other {
  position: relative;
}
.density {
  position: absolute;
  left: 1rem;
  top: 1.7rem;
  z-index: 9999;
}
</style>
